<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="addForm"
    size="mini"
  >
    <!-- <el-form-item label="租户"  v-if="isShow">
      <filterSelect  @change="typeCodeChange"></filterSelect>
    </el-form-item> -->
    <el-row>
      <el-col :span="12">
        <el-form-item label="表字段" prop="attrField">
          <el-input v-model="ruleForm.attrField" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="字段名称" prop="attrName">
          <el-input v-model="ruleForm.attrName" clearable />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="字段类型" prop="showType">
          <el-select
            v-model="ruleForm.showType"
            placeholder="请输入字段类型"
            clearable
            class="zw"
            filterable
            @change="showTypeChangeFun"
          >
            <el-option
              v-for="(item,index) in taskShowTypeOption"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否必填">
          <el-switch v-model="ruleForm.isRequired" active-value="1" inactive-value="0" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="是否汇报填入">
          <el-switch v-model="ruleForm.isReport" active-value="1" inactive-value="0" />
        </el-form-item>
      </el-col>

      <!-- 字典值 动态表单-->
      <el-col v-if="cTypeShow('attrDictShow')" :span="12">
        <el-form-item label="字典值" prop="attrDict">
          <el-select
            v-model="ruleForm.attrDict"
            placeholder="请选择字典值"
            clearable
            class="zw"
            filterable
          >
            <el-option
              v-for="(item,index) in attrDictOptions"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 字典值 动态表单-->
    <el-form-item v-if="cTypeShow('resourceUrlShow')" label="URL地址" prop="resourceUrl">
      <el-input v-model="ruleForm.resourceUrl" clearable />
    </el-form-item>

    <el-form-item v-if="cTypeShow('idShow')" label="关联属性" prop="attrRelevance">
      <el-select
        v-model="ruleForm.attrRelevance"
        placeholder="请选择关联属性"
        clearable
        class="zw"
        filterable
      >
        <el-option
          v-for="(item,index) in idOptions"
          :key="index"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="描述" prop="attrRemark">
      <el-input v-model="ruleForm.attrRemark" type="textarea" clearable />
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input v-model.number="ruleForm.sort" clearable />
    </el-form-item>
  </el-form>
</template>

<script>
// import { mapGetters } from "vuex";
import { isRequierdOptions } from '@/views/taskUi/baseTask/optionsData/optionsData'
// import filterSelect from "@/components/filterSelect";
import { formRules } from './formRules'
import { getDictlist, getTaskAttrTenant } from '@/api/portalTaskUi/taskType'
export default {
  name: 'AddForm',
  components: {
    // filterSelect
  },
  props: {
    params: {
      type: Object,
      default: () => ({})
    },
    user: {
      type: Object,
      default: () => ({})
    },
    taskShowTypeOption: {
      type: Array,
      default: () => []
    }
  },
  // mounted () {
  //   console.log(this.ruleForm)
  //   this.showTypeChangeFun(this.ruleForm.showType)
  // },
  data() {
    const defaultParams = this.createFormObj()
    return {
      isRequierdOptions,
      ruleForm: Object.assign(defaultParams, this.params),
      isReportOptions: [
        { value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      attrDictOptions: [], // 字典值options
      idOptions: [], // 关联属性
      rules: formRules, // 表单规则
      currentType: [], //  当前表单显示的类型
      isValidator: false // 是否检验通过
    }
  },
  computed: {
    // isSelectAble () {
    //   return this.user.code === "1";
    // },
    isShow() {
      return this.ruleForm.attrType === 'tenant'
    },
    cTypeShow() {
      return function(val) {
        return this.currentType.includes(val)
      }
    }
  },
  created() {
    // this.$set(this.ruleForm, "typeCode", this.user.id)
    console.log(this.params)
    // this.setDictOptions()
    // this.setIdsOptions(this.params)
  },
  methods: {
    typeCodeChange(val) {
      this.ruleForm.typeCode = val
    },
    createFormObj(typeCode = '') {
      return {
        typeCode, // 租户
        attrField: '', // 表字段
        attrName: '', // 字段名称
        showType: '', // 字段类型
        isRequired: '', // 是否必填
        isReport: '', // 是否汇报填入
        attrRemark: '', // 描述
        sort: '', // 排序
        attrDict: '', // 字典值
        resourceUrl: '', // url
        attrRelevance: '', // 关联属性
        attrType: 'tenant'
      }
    },
    async setFormData(data) {
      this.attrDictOptions = await this.setDictOptions()
      const idOptions = await this.setIdsOptions(this.params)
      const defaultParams = this.params.attrType === 'tenant' ? this.createFormObj(this.user.id) : this.createFormObj()
      this.ruleForm = Object.assign(defaultParams, data, this.params)
      this.idOptions = idOptions.filter(v => v.attrField !== this.ruleForm.attrField)
      this.showTypeChangeFun(this.ruleForm.showType)
    },
    // 设置字典的options
    setDictOptions() {
      return new Promise(resolve => {
        let attrDictOptions = []
        getDictlist().then(res => {
          attrDictOptions = res.data.data.map(v => {
            v.label = v.description
            v.value = v.type
            return v
          })
          resolve(attrDictOptions)
        })
      })
    },
    // 设置关联属性的字典值
    setIdsOptions(params) {
      let idOptions = []
      return new Promise((resolve) => {
        getTaskAttrTenant(params).then(res => {
          console.log(res)
          idOptions = res.data.data.map(v => {
            v.label = v.attrName
            v.value = v.attrField
            return v
          })
          resolve(idOptions)
        })
      })
    },

    // 改变字段类型发生变化
    showTypeChangeFun(value) {
      // 控制动态表单是否显示
      this.currentType = []
      const attrDictArr = ['radio', 'checkbox', 'select'] // attrDict
      const resourceUrlArr = ['selectWin', 'multiselectWin'] // resourceUrl
      const idArr = attrDictArr.concat(resourceUrlArr)
      const map = {
        attrDictShow: attrDictArr,
        resourceUrlShow: resourceUrlArr,
        idShow: idArr
      }
      for (const key in map) {
        if (map[key].includes(value)) {
          if (!this.currentType.includes(key)) {
            this.currentType.push(key)
          }
        }
      }
      console.log(this.currentType)
    },
    // 提交的方法
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        this.isValidator = valid
      })
      return this.isValidator
    },
    // 移除检验结果
    clearValidate() {
      console.log('移除')
      this.$refs.ruleForm.clearValidate()
    },
    // 移除检验结果
    resetFields() {
      console.log('resetFields')
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.zw {
  width: 100% !important;
}
</style>
